
<template>
  <div>
    <c-title :text="text"></c-title>
    <keep-alive>
      <Bind v-if="type == 1" :device_no="device_no" :url="url" :course_name="course_name"></Bind>
      <Card v-if="type == 2" :list="list" @delete_card="delete_card" @onChange="onChange" :url="url" :member="member" :course_name="course_name"></Card>
    </keep-alive>
  </div>
</template>

<script>
import Card from "./components/card.vue"
import Bind from "./components/bind.vue"
import { scrollMixin } from '../../utils/mixin';
import {Dialog} from "vant";
export default {
  components: { Card, Bind },
  minxin: [scrollMixin],
  data() {
    return {
      text:"",
      type: null,//1-没绑定、2-绑定了

      device_no:"",
      list: [],
      current_page: 1,
      last_page: 1,
      isLoadMore: true,

      member: {},
      course_name:"",
      url: "",

    }
  },
  activated() {
    this.device_no = "";
    this.isLoadMore = true;
    this.list = [];
    this.type = null;
    if(this.$route.query.device_no){
      this.device_no =this.$route.query.device_no;
    }
    this.getData();
  },
  methods: {
    onChange(active) {
      if (active == 1) {
        this.get_consumption();
      } else if (active == 2) {
        this.get_recharge()
      } else if (active == 3) {
        this.get_gift()
      }
    },
    getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      let page = this.current_page + 1;
      if (this.active == 1) {
        this.get_consumption(page);
      } else if (this.active == 2) {
        this.get_recharge(page)
      } else if (this.active == 3) {
        this.get_gift(page)
      }
    },

    get_consumption(page = 1) {
      $http.get('plugin.water-machine.frontend.consumer.member-card.consumption', { page }, 'loading').then(res => {
        if (res.result) {
          this.current_page = res.data.current_page;
          this.last_page = res.data.last_page;
          (page == 1) ? (this.list = res.data.data) : (this.list = this.list.concat(res.data.data))
        } else {
          this.$toast(res.msg);
        }
      })
    },
    get_recharge(page = 1) {
      $http.get('plugin.water-machine.frontend.consumer.member-card.recharge', { page }, 'loading').then(res => {
        if (res.result) {
          this.current_page = res.data.current_page;
          this.last_page = res.data.last_page;
          (page == 1) ? (this.list = res.data.data) : (this.list = this.list.concat(res.data.data))
        } else {
          this.$toast(res.msg);
        }
      })
    },
    get_gift(page = 1) {
      $http.get('plugin.water-machine.frontend.consumer.member-card.gift', { page }, 'loading').then(res => {
        if (res.result) {
          this.current_page = res.data.current_page;
          this.last_page = res.data.last_page;
          (page == 1) ? (this.list = res.data.data) : (this.list = this.list.concat(res.data.data))
        } else {
          this.$toast(res.msg);
        }
      })
    },
    delete_card(){
      Dialog.confirm({
      title: '是否删除会员卡',
    })
      .then(() => {
        $http.post("plugin.water-machine.frontend.consumer.member-card.unbind").then(res=>{
        this.$toast(res.msg);
        if(res.result){
          this.getData();
        }
      })
      })
      .catch(() => {
        // on cancel
      });
    },
    getData() {
      $http.get('plugin.water-machine.frontend.consumer.member-card.index',{},"").then(res => {
        if (res.result) {

          let basic_info = JSON.parse(localStorage.getItem("yz_basic_info")) || res.basic_info;
          let text =  basic_info&&basic_info.plugin_setting.water_machine_header;
          this.text = text;
          this.fun.setWXTitle(text)

          if (res.data.device_no == "" && this.device_no=="") {
            Dialog.alert({
              message: '请扫打水机设备码',
            }).then(() => {
              window.location.href=res.data.course_url;
            });
            return;
          };
          this.member = res.data.member;

          if (res.data.member) {
            this.type = 2;
            this.member = res.data.member;
          } else {
            this.type = 1;
          }
          this.url = res.data.course_url;
          this.course_name = res.data.course_name;
        } else {
          this.$toast(res.msg);
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.water-user-tie-card {
  .tie-card {
    margin: 8.1875rem auto;
    width: 11.25rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    border-radius: 2.5rem;
    color: #fff;
    background: #fe5e56;
  }

  .box {
    padding: 2.375rem 1.625rem 0.3125rem;
    box-sizing: border-box;
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
  }

  text {
    flex-shrink: 0;
    text-align: left;
  }

  input {
    border: 0.0625rem solid #bbb;
    padding: 0.625rem;
    margin-left: 0.6875rem;
    border-radius: 0.625rem;
    flex: 1;
  }
}
</style>